<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>珈云管理端</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/common.css"/>
    <link rel="stylesheet" href="styles/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }
/*1*/
        .app-main {
            height: calc(100% - 64px);
        }

        .app-main .divTmp {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
            <div class="logo">
                <!-- <img src="images/logo1.jpg" width="122.5" alt="" /> -->
                <span style="color:#fff;font-size: 20px;">珈云系统</span>
            </div>
            <!--          <el-scrollbar wrap-class="scrollbar-wrapper">-->
            <el-menu
                    :default-active="defAct"
                    :unique-opened="false"
                    :collapse-transition="false"
                    background-color="#343744"
                    text-color="#bfcbd9"
                    active-text-color="#f4f4f5"
                    style="max-height: 100%;overflow-y: auto;margin-top: -90px;"
            >
                <div v-for="item in menuList" :key="item.id">
                    <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                        <template slot="title">
                            <i class="iconfont" :class="item.icon"></i>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item
                                v-for="sub in item.children"
                                :index="sub.id"
                                :key="sub.id"
                                @click="menuHandle(sub,false)"
                        >
                            <i :class="iconfont" :class="sub.icon"></i>
                            <span slot="title">{{sub.name}}</span>
                        </el-menu-item
                        >
                    </el-submenu>
                    <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                        <i class="iconfont" :class="item.icon"></i>
                        <span slot="title">{{item.name}}</span>
                    </el-menu-item>
                </div>
            </el-menu>
            <!--          </el-scrollbar>-->
        </div>
        <div class="main-container">
            <!-- <navbar /> -->
            <div class="navbar">
                <div class="head-lable">
              <span v-if="goBackFlag" class="goBack" @click="goBack()"
              ><img src="images/icons/btn_back@2x.png" alt=""/> 返回</span
              >
                    <span>{{headTitle}}</span>
                </div>
                <div class="right-menu">
                    <div class="avatar-wrapper">{{ userInfo.name }}</div>
                    <!-- <div class="logout" @click="logout">退出</div> -->
                    <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
                </div>
            </div>
            <div class="app-main" v-loading="loading">
                <div class="divTmp" v-show="loading"></div>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/login.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '1',
                menuActived: '1',
                userInfo: {},
                /*左侧导航栏数据*/
                menuList: [
                    {
                        id: '1',
                        name: '欢迎页面',
                        url: 'page/hello.html',
                        icon: 'icon-kechengchakan'
                    },
                    {
                        id: '2',
                        name: '一键开店',
                        url: 'page/kaidian/kaidian.html',
                        icon: 'icon-guanliyuan'
                    },
                    {
                        id: '3',
                        name: '店铺管家',
                        url: 'page/shopkeeper/list.html',
                        icon: 'icon-jiaoshi'
                    },
                    {
                        id: '4',
                        name: '教师管理',
                        url: 'page/teacher/list.html',
                        icon: 'icon-yonghufill'
                    },
                    {
                        id: '5',
                        name: '会员管理',
                        url: 'page/member/list.html',
                        icon: 'icon-ly_huiyuanka'
                    },
                    {
                        id: '6',
                        name: '卡片模板',
                        url: 'page/card/list.html',
                        icon: 'icon-jiaoshi'
                    },
                    {
                        id: '7',
                        name: '标签管理',
                        url: 'page/tags/list.html',
                        icon: 'icon-tianchongxing-'
                    },
                    {
                        id: '8',
                        name: '通知管理',
                        url: 'page/notice/list.html',
                        icon: 'icon-huodong'
                    },
                    {
                        id: '9',
                        name: '新闻管理',
                        url: 'page/news/list.html',
                        icon: 'icon-fenlei'
                    },
                    // {
                    //     id: '10',
                    //     name: '设置管理',
                    //     url  : 'page/shop/list.html',
                    //     icon: 'icon-shangpin'
                    // },
                    {
                        id: '11',
                        name: '管理员管理 ',
                        url: 'page/admin/list.html',
                        icon: 'icon-dingdan'
                    }
                ],
                //iframeUrl: 'page/admin/list.html',
                iframeUrl: 'page/hello.html',
                headTitle: '欢迎页面',
                goBackFlag: false,
                loading: true,
                timer: null,
                historyStack: [],
                currentPage: null,
                isFromHistory: false,
                pageHistory: []
            }
        },
        computed: {},
        created() {
            const userInfo = window.localStorage.getItem('userInfo');
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo);
            }
            this.closeLoading()
        },
        beforeDestroy() {
            this.timer = null;
            clearTimeout(this.timer);
        },
        mounted() {
            window.menuHandle = this.menuHandle;
            // 相当于全局变量
            window.safeNavigateTo = this.safeNavigateTo;
            window.goBack = this.goBack;
        },
        methods: {
            // 定义根页面以方便清除历史页面
            isRootPage(url) {
                return url.includes('list.html') ||
                    url.includes('kaidian.html') ||
                    url.includes('hello.html');
            },
            logout() {
                // var flag = confirm("确定要退出系统吗？");
                this.$confirm('确定退出当前登录账号嘛?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    logoutApi().then((res) => {
                        if (res.code === 1) {
                            // window.ELEMENT.Message({
                            //     message: res.msg,
                            //     type: 'success',
                            // })
                            this.$message({
                                    type: 'success',
                                    message: res.msg
                                }
                            );
                            setTimeout(function () {
                                /*从本地栈内移除数据*/
                                localStorage.removeItem('userInfo');
                                localStorage.removeItem('adminId');
                                window.location.href = 'page/login/login.html';
                            }, 1000)
                        } else {
                            // localStorage.removeItem('userInfo');
                            // localStorage.removeItem('adminId');
                            setTimeout(function () {
                                window.ELEMENT.Message({
                                    message: res.msg,
                                    type: 'error',
                                })
                            }, 1000)
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
                // if (flag) {
                //     //res == res.data
                //     logoutApi().then((res) => {
                //         if (res.code === 1) {
                //             window.ELEMENT.Message({
                //                 message: res.msg,
                //                 type: 'success',
                //             })
                //             setTimeout(function () {
                //                 /*从本地栈内移除数据*/
                //                 localStorage.removeItem('userInfo');
                //                 localStorage.removeItem('adminId');
                //                 window.location.href = 'page/login/login.html';
                //             }, 1000)
                //         } else {
                //             localStorage.removeItem('userInfo');
                //             localStorage.removeItem('adminId');
                //             setTimeout(function () {
                //                 window.ELEMENT.Message({
                //                     message: res.msg,
                //                     type: 'error',
                //                 })
                //             }, 1000)
                //         }
                //     })
                // }
            },
            goBack() {
                //   栈的逻辑
                // 标记为从历史记录跳转
                // 这里的url也会包括从“上一个页面”传递过来的参数
                if (this.pageHistory.length > 0) {
                    const prevPage = this.pageHistory.pop();
                    this.menuHandle({
                        id: prevPage.menuId,
                        url: prevPage.url,
                        name: prevPage.title
                    }, true);
                }
                // window.location.href = 'javascript:history.go(-1)'
                // const menu = this.menuList.find(item=>item.id===this.menuActived);
                // // this.goBackFlag = false;
                // // this.headTitle = menu.name;
                // this.menuHandle(menu,false)
            },
            menuHandle(item, isHistoryNavigation = false) {
                this.loading = true;
                // 先判断是否是根页面
                if (this.isRootPage(item.url) && !isHistoryNavigation) {
                    this.pageHistory = [];
                } else if (!isHistoryNavigation && this.currentPage) {
                    // 写入历史页面压入栈顶
                    this.pageHistory.push({
                        url: this.currentPage.url,
                        title: this.headTitle,
                        menuId: this.menuActived
                    });
                }
                // 共同的跳转
                this.currentPage = {
                    url: item.url,
                    name: item.name,
                    id: item.id
                };

                this.menuActived = item.id;
                this.iframeUrl = item.url;
                this.headTitle = item.name;
                // 是否展示返回
                this.goBackFlag = this.pageHistory.length > 0;
                this.closeLoading();
            },
            //
            //   this.loading = true;
            //   this.menuActived = item.id;
            //   this.iframeUrl = item.url;
            //   this.headTitle = item.name;
            //   this.goBackFlag = goBackFlag;
            //   this.closeLoading()
            // },
            closeLoading() {
                this.timer = null;
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 500)
            },
            //   准备在其他页面调用的跳转
            safeNavigateTo(url, title, menuId) {
                if (this.isRootPage(url)) {
                    this.pageHistory = [];
                }
                this.menuHandle({
                    id: menuId || this.menuActived,
                    url: url,
                    name: title
                });
            }
        },
        watch: {
            iframeUrl(newVal, oldVal) {
                // 当 iframe URL 即将变化时，通知子页面保存状态
                const iframe = document.getElementById('cIframe');
                if (iframe && iframe.contentWindow && iframe.contentWindow.saveToCache) {
                    iframe.contentWindow.saveToCache();
                }
            }
        }
    })
</script>
</body>
</html>
